<template>
    <div>
        <el-button text @click="controlHide" v-if="addDisplay == true">
            新增
        </el-button>

        <el-button text @click="controlHide" v-if="addDisplay !== true"
            style="color:#1abc9c;padding: 0;margin: 0;width: 40px;">
            编辑
        </el-button>
        <el-dialog v-model="dialogFormVisible" title="新增体检项" width="59%" :append-to-body="true">
            <div class="box">
                <el-form :model="Add">
                    <div class="topBox">
                        <div class="leftBox">
                            <el-form-item label="体检项名称：" :label-width="formLabelWidth" :rules="[{ required: true }]"
                                prop:projectname>
                                <el-input v-model="Add.projectname" autocomplete="off" placeholder="请输入体检项名称" />
                            </el-form-item>
                            <el-form-item label="体检项 I D:" :label-width="formLabelWidth" :rules="[{ required: true }]"
                                prop:projectid>
                                <el-input v-model="Add.id" disabled="true" autocomplete="off" placeholder="系统自动生成" />
                            </el-form-item>
                            <el-form-item label="是否启用：" :label-width="formLabelWidth" :rules="[{ required: true }]"
                                prop:isenable>
                                <el-switch v-model="Add.isenable" />
                            </el-form-item>
                            <el-form-item label="适用标签：" :label-width="formLabelWidth" :rules="[{ required: true }]">
                                <div>
                                    <el-checkbox v-model="checked1" label="男性项目" :border="true" />
                                    <el-checkbox v-model="checked2" label="女性项目" :border="true" />
                                    <el-checkbox v-model="checked3" label="未婚项目" :border="true" />
                                    <el-checkbox v-model="checked4" label="已婚项目" :border="true" />
                                    <el-checkbox v-model="checked5" label="不区分性别" :border="true" />
                                    <el-checkbox v-model="checked6" label="不区分婚否" :border="true" />
                                </div>
                            </el-form-item>
                            <el-form-item label="原价：" :label-width="formLabelWidth"
                                :rules="[{ required: true, message: '请输入原价' }, { type: 'number', message: '请输入数字' }]"
                                prop:originprice>
                                <el-input v-model="Add.originprice" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="售价：" :label-width="formLabelWidth" :rules="[{ required: true }]"
                                prop:saleprice>
                                <el-input v-model="Add.saleprice" autocomplete="off" />
                            </el-form-item>

                        </div>
                        <div class="rightBox">
                            <el-form-item label="适用城市：" :label-width="formLabelWidth" :rules="[{ required: true }]">
                                <div class="city-smallbox">
                                    <el-select v-model="Add.applicationarea" class="m-2" placeholder="全部" size="small"
                                        @change="changeProvince">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div class="city-smallbox2">
                                    <el-select v-model="Add.citys" class="m-2" placeholder="全部" size="small"
                                        @change="changecity">
                                        <el-option v-for="item in option" :key="item.values" :labels="item.label"
                                            :value="item.values" />
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="适用机构：" :label-width="formLabelWidth" :rules="[{ required: true }]">
                                <div class="city-smallbox3">
                                    <el-select v-model="suitMechanism" class="m-3" placeholder="全部" size="small"
                                        @change="changeSuitMechanism">
                                        <el-option v-for="item in mechanismOption" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="分支机构：" :label-width="formLabelWidth" :rules="[{ required: true }]">
                                <el-transfer v-model="value" filterable :filter-method="filterMethod"
                                    filter-placeholder="请输入内容" :data="data" :titles="['机构列表', '已选机构']" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="btnBox">
                        <el-form-item label="检查范围：" :label-width="formLabelWidth" :rules="[{ required: true }]" prop:scope>
                            <el-input v-model="Add.scope" :rows="2" type="textarea" />
                        </el-form-item>
                        <el-form-item label="检查意义：" :label-width="formLabelWidth" :rules="[{ required: true }]" prop:meat>
                            <el-input v-model="Add.meat" :rows="2" type="textarea" />
                        </el-form-item>
                        <el-form-item label="注意事项：" :label-width="formLabelWidth" prop:note>
                            <el-input v-model="Add.note" :rows="2" type="textarea" />
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sendadd(testOptionId as number)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import service from '@/utils/service';
import { ElMessage } from 'element-plus'

const value = ref('')
const emit = defineEmits(['addChange'])
const suitMechanism = ref('')
const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const props = defineProps<{
    addDisplay: boolean,
    testOptionId?: number
}>()
//定义编辑，添加数据
interface IAdd {
    "projectname": string,
    "id": string,
    "isenable": boolean,
    "originprice": string,
    "saleprice": string,
    "scope": string,
    "applicationarea": string,
    "citys": string,
    "meat": string,
    "note": string
}
const Add = reactive({
    "projectname": '',
    "id": '',
    "isenable": true,
    "originprice": '',
    "price": '',
    "saleprice": '',
    "scope": '',
    "applicationarea": '',
    "citys": '',
    "meat": '',
    "note": ''
})
//添加数据
const addPeople = (id: number) => {
    if (props.addDisplay == true) {
        service({
            url: '/testOptions',
            method: 'post',
            data: {
                ...Add
            }
        }).then(res => {
            if (res.data) {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                emit("addChange")
                dialogFormVisible.value = false;           
                dialogFormVisible.value = false;

                Add.projectname = '';
                Add.originprice = '';
                Add.saleprice = '';
                Add.scope = '';
                Add.meat = '';
                Add.note = '';
                Add.id = '';

            }
        })
    } else {
        //改
        service({
            url: `/testOptions/${id}`,
            method: "put",
            data: {
                ...Add
            }
        }).then(res => {
            ElMessage({
                message: '编辑成功',
                type: 'success',
            })
            emit("addChange")      

            dialogFormVisible.value = false;
        })

    }
}
watch(dialogFormVisible, () => {
    if (dialogFormVisible.value && props.addDisplay === false) {
        service({
            url: `/testOptions/${props.testOptionId}`,
        }).then(res => {
            if (res.data) {
                let k: keyof IAdd;
                for (k in Add) {
                    Add[k] = res.data[k] as never
                }
            }
        })

    }
})


//非空正则判断
const sendadd = (id: number) => {
    let costReg = /^\d+$/
    let priceReg = /^\d+$/
    if (Add.projectname && Add.originprice && Add.saleprice && Add.applicationarea && Add.meat) {
        if (costReg.test(Add.originprice) && priceReg.test(Add.saleprice)) {
            addPeople(id)
        } else {
            ElMessage({
                message: '请填写正确的格式',
                type: 'warning',
            })
        }
    } else {
        ElMessage({
            message: '请填写完整的数据',
            type: 'warning',
        })
    }
}

//穿梭框
interface Option {
    key: number
    label: string
    initial: string
}

const generateData = () => {
    const data: Option[] = []
    const states = [
        '朝阳店',
        '顺义店',
        '延庆店',
        '怀柔店'
    ]
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: index,
            initial: initials[index],
        })
    })
    return data
}

const data = ref<Option[]>(generateData())
// const value = ref([])

const filterMethod = (query: any, item: any) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}
//省份显示
interface Uorder {
    value: string,
    label: string
}
const options = reactive<Uorder[]>([])
const getOptions = () => {
    service({
        url: '/provinceshx'
    }).then(res => {
        options.length = 0
        res.data.forEach((item: any) => {
            options.push({
                value: item.省,
                label: item.省
            })
        })
    })
}
getOptions()
//城市显示
interface Uorders {
    values: string,
    label: string
}
const option = reactive<Uorders[]>([])
const changeProvince = (val: string) => {
    console.log("val", val);

    service({
        url: '/provinceshx',
        params: {
            省: val
        }
    }).then(res => {
        option.length = 0
        res.data[0].市.forEach((item: any) => {
            option.push({
                values: item.市名,
                label: item.市名
            })
        })
    })
}
//发送请求，获取机构
const changecity = (val: string) => {
    service({
        url: '/provinceshx',
        params: {
            省: val
        }
    }).then(res => {
        if (res.data) {
            let arrNew = res.data[0].市.filter((item: any) => item.市名 === val)
            console.log("arrNew", arrNew);
            mechanismOption.length = 0;
            arrNew[0].mechanism.forEach((item: any) => {

                mechanismOption.push(
                    {
                        value: item.name,
                        label: item.name
                    }
                )
                console.log('item.name', item.name);
            })
        }

    })
}
//改变适用机构
interface ImechanismOption {
    label: string,
    value: string
}
const mechanismOption = reactive<ImechanismOption[]>([])
const changeSuitMechanism = (val: string) => {

}
//失焦
const controlHide = (e: MouseEvent) => {
    let target = e.target
    if ((target as HTMLElement).nodeName == "I" || (target as HTMLElement).nodeName == "SPAN") {
        target = (target as HTMLElement).parentNode
    }
    console.log(target);

    (target as HTMLElement).blur()
    dialogFormVisible.value = true
}

//编辑

</script>

<style scoped>
.el-button--text {
    margin-right: 15px;

}

.el-button {
    /* border: 1px solid gray; */
    box-sizing: border-box;
    width: 81px;
    height: 30px;
    background-color: #ffffff00;
    cursor: pointer;
    font-size: 12px;
    border-radius: 0;
    color: #000;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

:deep(.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label) {
    font-size: 8px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

:deep(.el-dialog__header) {
    margin-right: 0;
    background-color: #c8bdbd;
}

:deep(.el-dialog__title) {
    padding-right: 850px;
    font-weight: 700;
}
:deep(.el-dialog__body) {
    height: 520px;
}
.box{
    width: 96%;
    height: 490px;
    overflow: auto;
    border-bottom: 1px solid #e4e4e4;
}

.topBox {
    width: 100%;
    height: 400px;
    display: flex;
}

.btnBox {
    width: 100%;
    height: 390px;
}

.leftBox {
    width: 470px;
    height: 100%;
}

.rightBox {
    width: 470px;
    height: 100%;
}

.city-smallbox {
    width: 153px;
    height: 35px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    float: left;
    margin-right: 20px;
}

.city-smallbox2 {
    display: block;
    width: 154px;
    height: 35px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    float: left;
}

.city-smallbox3 {
    display: block;
    width: 350px;
    height: 35px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    float: left;
}

:deep(.m-2) {
    width: 140px;
    border: 1px solid black;
    border-radius: 3px;
    margin: 5px;
}

:deep(.m-3) {
    width: 315px;
    border: 1px solid black;
    border-radius: 3px;
    margin: 5px;
}

:deep(.el-transfer) {
    display: flex;
}

:deep(.el-transfer .el-transfer-panel) {
    width: 150px;
    height: 270px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(230, 228, 228, 0.679);
    border-radius: 3px;
}

:deep(.el-checkbox-group) {
    width: 135px;
    height: 185px;
    overflow: auto;
}

:deep(.el-transfer__buttons) {
    padding: 0;
    margin: 0;
    margin-top: 100px;
}

:deep(.el-transfer-panel__filter) {
    margin: 5px;
}

:deep(.el-transfer__button) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0;

}

:deep(.el-checkbox) {
    margin: 3px;
    display: flex;
    float: left;
}

:deep(.el-textarea__inner) {
    height: 110px;
}
</style>